<template>
  <div>
    <el-row :gutter="2">
      <el-col :span="4">
        <el-switch
          style="display: block"
          v-model="manualSw"
          active-color="#ff4949"
          inactive-color="#13ce66"
          active-text="手动查询"
          inactive-text="自动更新"
          @change="manualSwOnChange"
        >
        </el-switch>
      </el-col>
      <el-col :span="4"
        ><el-input
          placeholder="型号"
          v-model="selectType"
          clearable
          size="mini"
        >
        </el-input
      ></el-col>
      <el-col :span="2"
        ><el-select
          v-model="selectJudge"
          clearable
          size="mini"
          placeholder="判定"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
      ></el-col>
      <el-col :span="2"
        ><el-select
          v-model="selectDirection"
          clearable
          size="mini"
          placeholder="排序"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
      ></el-col>
      <el-col :span="8"
        ><el-date-picker
          v-model="selectDate"
          type="datetimerange"
          size="mini"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker
      ></el-col>
      <el-col :span="2"
        ><el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          :disabled="!manualSw"
          @click="serchOnClick"
          >查询</el-button
        ></el-col
      >
      <el-col :span="2"
        ><el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="!manualSw"
          @click="deleteOnClick"
          >删除</el-button
        ></el-col
      >
    </el-row>

    <el-table
      ref="multipleTable"
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      height="450"
      stripe
      border
      @selection-change="handleSelectionChange"
      :empty-text="loadingText()"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="date" label="测量日期" width="100" />
      <el-table-column prop="time" label="测量时间" />
      <el-table-column prop="type" label="产品型号" />
      <el-table-column prop="ch1value" label="CH1数值" width="90" />
      <el-table-column prop="ch2value" label="CH2数值" width="90" />
      <el-table-column prop="ch3value" label="CH3数值" width="90" />
      <el-table-column prop="ch4value" label="CH4数值" width="90" />
      <el-table-column prop="ch5value" label="CH5数值" width="90" />
      <el-table-column prop="ch6value" label="CH6数值" width="90" />
      <el-table-column prop="ch7value" label="CH7数值" width="90" />
      <el-table-column prop="ch8value" label="CH8数值" width="90" />
      <el-table-column prop="totalJudge" label="综合判定" />
      <el-table-column prop="ch1judge" label="CH1判断" />
      <el-table-column prop="ch2judge" label="CH2判断" />
      <el-table-column prop="ch3judge" label="CH3判断" />
      <el-table-column prop="ch4judge" label="CH4判断" />
      <el-table-column prop="ch5judge" label="CH5判断" />
      <el-table-column prop="ch6judge" label="CH6判断" />
      <el-table-column prop="ch7judge" label="CH7判断" />
      <el-table-column prop="ch8judge" label="CH8判断" />
    </el-table>
    <el-pagination
      :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400]"
      :page-size.sync="pageSize"
      :current-page.sync="currentPage"
      background
      layout="total,sizes, prev, pager, next,jumper"
      :total="tableData.length"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectDate: [],
      selectType: "",
      manualSw: false,
      options1: [
        {
          value: "OK",
          label: "OK",
        },
        {
          value: "NG",
          label: "NG",
        },
      ],
      selectJudge: "",
      options2: [
        {
          value: "DESC",
          label: "降序",
        },
        {
          value: "ASC",
          label: "升序",
        },
      ],
      selectDirection: "",
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      pageSize: 10,
      refreshTimer: null,
      loading: true,
    };
  },
  created() {},
  mounted() {
    this.manualSwOnChange(this.manualSw);
  },
  destroyed() {
    if (this.refreshTimer) clearInterval(this.refreshTimer);
  },
  methods: {
    loadingText() {
      if (this.loading) return "玩命加载中";
      else return "暂无数据";
    },
    getRecord(params) {
      this.loading = true;
      params.measureType = "normal";
      this.$http({
        method: "get",
        url: "/record",
        params: params,
        headers: {},
      }).then((res) => {
        this.loading = false;
        this.tableData = res.data;
        // console.log("getRecord");
      });
    },

    manualSwOnChange(val) {
      // console.log(val);
      if (val) {
        if (this.refreshTimer) clearInterval(this.refreshTimer);
      } else {
        this.refreshTimer = setInterval(() => {
          var params = {};
          var startTime =
            new Date(new Date().toLocaleDateString()).getTime() -
            24 * 60 * 60 * 1000; // 当天0点
          var endTime =
            new Date(new Date().toLocaleDateString()).getTime() +
            24 * 60 * 60 * 1000 -
            1; // 当天23:59
          params.fliter_by_time = `${startTime}_${endTime}`;
          this.getRecord(params);
        }, 1000);
      }
    },

    serchOnClick() {
      var params = {};
      if (this.selectType) params.type = this.selectType;
      if (this.selectJudge) params.fliter_by_judge = this.selectJudge;
      if (this.selectDirection) params.order = this.selectDirection;
      if (this.selectDate.length == 2) {
        var startTime = new Date(this.selectDate[0]).getTime();
        var endTime = new Date(this.selectDate[1]).getTime();
        if (startTime && endTime)
          params.fliter_by_time = `${startTime}_${endTime}`;
      }
      this.getRecord(params);
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    deleteOnClick() {
      // console.log(this.multipleSelection);
      if (this.multipleSelection.length > 0) {
        var ids = this.$linq
          .from(this.multipleSelection)
          .select("x=>x.id")
          .toArray();
        this.$http({
          method: "delete",
          url: "/record",
          params: {},
          data: { measureType: "normal", ids: ids },
        }).then((res) => {
          if (res.status == 200) {
            // console.log("删除成功");
            var remain = this.$linq
              .from(this.tableData)
              .except(this.multipleSelection)
              .toArray();
            this.tableData = remain;
          }
        });
      }
    },
  },
};
</script>

<style>
</style>